import React from "react";
import { useLocation, useParams, useSearchParams } from "react-router-dom";
// 这是接收参数的详情页 useImperativeHandle

const DetailData = [
    { id: "01", content: "你好，中国" },
    { id: "02", content: "你好，尚硅谷" },
    { id: "03", content: "你好，未来的自己" },
];

export default function Detail() {
    // v6 版本必须使用函数式组件，使用 hooks 接受 params 参数
    const { id, title } = useParams();

    // 接受search参数
    // const [params] = useSearchParams();

    // const id = params.get("id");
    // const title = params.get("title");

    // 接受 state 参数
    // const { id, title } = useLocation().state || {};

    const findResult =
        DetailData.find((detailObj) => {
            return detailObj.id === id;
        }) || {};

    return (
        <ul>
            <li>ID:{id}</li>
            <li>TITLE:{title}</li>
            <li>CONTENT:{findResult.content}</li>
        </ul>
    );
}
